<template>
  <div class="shangpin">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div class="soushou">
        <el-input placeholder="请输入内容" width="500" v-model="input3" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="secent"></el-button>
        </el-input>
        <el-button style="margin-left: 20px" type="primary" @click="tianjan">添加商品</el-button>
      </div>
      <el-table :data="tableData" stripe border style="width: 83vw; margin-top:10px">
        <el-table-column fixed type="index" label="" width="60" min-width="">
        </el-table-column>
        <el-table-column fixed prop="goods_name" label="商品名称" min-width="350" max-width="1000">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="79">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="80" >
        </el-table-column>
        <el-table-column prop="city" label="创建时间" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-popover
                placement="bottom"
                width="10"
                popper-class=“area_popper”
                trigger="hover">
              <p>编辑商品信息</p>
              <el-button
                  size="mini"
                  slot="reference"
                  @click="handleEdit(scope.row.goods_id)">编辑</el-button>
            </el-popover>
            <el-popover
                placement="bottom"
                width="10"
                popper-class=“area_popper”
                trigger="hover">
              <p>删除商品</p>
              <el-button
                  size="mini"
                  type="danger"
                  title="删除商品"
                  slot="reference"
                  style="margin-left: 10px"
                  @click="handleDelete(scope.row.goods_id)">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handcurrentPage"
                       :current-page="currentPage" :page-sizes="[2 , 10, 20, 30]"
                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "OrderView",
  data() {
    return {
      input3: "",
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      del: true,
    }
  },
  async created() {
    let res = await this.$http.getgoods({pagenum: 1, pagesize: 10})
    console.log(res)
    this.tableData = res.data.data.goods
    this.total = res.data.data.total
  },
  methods: {
    async handleSizeChange(num) {
      let obj = {
        query: this.input3,
        pagenum: this.pageNum,
        pagesize: num
      }
      let res = await this.$http.getgoods(obj)
      this.tableData = res.data.data.goods
      this.total = res.data.data.total
      console.log(res)
      this.pageSize = num
    },
    async handcurrentPage(num) {
      let obj = {
        query: this.input3,
        pagenum: num,
        pagesize: this.pageSize
      }
      let res = await this.$http.getgoods(obj)
      this.tableData = res.data.data.goods
      this.total = res.data.data.total
      this.pageNum = num
    },
    async created() {
      let res = await this.$http.getgoods({pagenum: 1, pagesize: 10})
      this.tableData = res.data.data.goods
    },
    handleEdit(a) {
      console.log(a)
    },
    async handleDelete(a) {
      this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.$http.delgoods(a)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      let res1 = await this.$http.getgoods({pagenum: this.pageNum, pagesize: this.pageSize})
      this.tableData = res1.data.data.goods
    },
    tianjan() {
      this.$router.push("/home/oms/addgood")
    },
    async secent() {
      let obj = {
        query: this.input3,
        pagenum: this.pageNum,
        pagesize: this.pageSize
      }
      let res = await this.$http.getgoods(obj)
      this.tableData = res.data.data.goods
      this.total = res.data.data.total
      console.log(res)
    }
  }
}
</script>

<style scoped lang="scss">
  .shangpin {
    color: #333;
    width: 100%;
    height: 89vh;
    overflow-y: auto;
    padding: 20px;
    .el-card {
      margin-top: 10px;
      .el-card__body {
        padding: 20px;
      }
      .el-table .el-table__cell {
        font-size: 12px;
        padding: 10px 0;
      }

    }
    .soushou {
      width: 600px;
      display: flex;
    }
  }
  .area_popper{
    background-color: #3d4451!important;
    border-radius: 6px!important;
    opacity: 0.9!important;
    font-size: 12px!important;
    color: #ffffff!important;
    padding: 0!important;
  }

</style>